<template>
	<view class="wrap">
		<u-navbar :placeholder="true" bg-color="#fff">
			<view slot="left" class="signage" @click="oncity()">
				<u-icon name="map"></u-icon>
				<text class="shop-name">{{ region }}</text>
				<u-icon name="arrow-down"></u-icon>
			</view>

			<view slot="center" class="signage">
				<text class="shop-name">百草堂</text>
			</view>
			<view slot="right" class="u-flex screen-wrap" @tap="show=true">
				<image src="../../static/love/screen-icon.png" class="screen-icon"></image>
				筛选
			</view>
		</u-navbar>
		<view class="nav">
			<u-tabs :list="list1" lineWidth="0" lineColor="#f56c6c" :activeStyle="{
			           color: '#f56c6c',
			           fontWeight: '500',
			           transform: 'scale(1)'
			       }" :inactiveStyle="{
			           color: '#606266',
			           transform: 'scale(1)'
			       }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;width:300upx;">
			</u-tabs>
		</view>
		<view class="art-box">
			<block v-for="(item,index) in 4" :key="index">
				<view class="art-item u-flex">
					<image src="../../static/1.jpg" class="art-img"></image>
					<view class="art-right-box u-flex u-flex-column u-flex-between">
						<view class="art-top u-flex u-flex-between">
							<text class="nickname">依然</text>
							<image src="../../static/love/unreal.png" class="authentication-icon"
								v-if="Number(index+1)%2==0"></image>
							<image src="../../static/love/real.png" class="authentication-icon" v-else></image>
						</view>
						<view class="tips">诚寻靠谱男结婚，非诚勿扰</view>
						<view class="art-bottom u-flex u-flex-between">
							<text>32岁</text>
							<text>九龙坡石桥铺</text>
						</view>
					</view>
				</view>
				<view class="advertisement-box" v-if="Number(index+1)%3==0">
					<image src="../../static/1.jpg"></image>
				</view>
			</block>
		</view>
		<popup-layer ref="popupRef" :direction="'right'">
			<view style="width:750upx;height: 100%;">
				<citySelect @back_city="back_city"></citySelect>
			</view>
		</popup-layer>
		<u-popup :show="show" mode="top" @close="close" @open="open">
			<u-tabs lineWidth="0" lineColor="#f56c6c" :activeStyle="{
			           color: '#f56c6c',
			           fontWeight: '500',
			           transform: 'scale(1)',
			       }" :inactiveStyle="{
			           color: '#606266',
			           transform: 'scale(1)'
			       }" itemStyle="padding-left: 15px; padding-right: 15px; height: 54px;width:300upx;"
				:list="screenNav"  @click="screenChange"></u-tabs>
			<view class="screen-cont" v-if="screenIndex==0">
				<view class="screen-item u-flex u-flex-between">
					<view class="screen-title">性别</view>
					<view>
						<ul class="tabs-ul">
						  <li class="tabs-ul-li" :class="{active:item.id==activeTab}" v-for="(item, index) in tabs" :key="index" @click="changeTab(item.id)">{{ item.title }}</li>
						  </ul>
					</view>
				</view>
				<view class="screen-item u-flex u-flex-between" @tap="pickerOpen(0)" >
					<view class="screen-title">地区</view>
					<view class="u-flex">
						<view class="screen-text">{{pickerText||'不限'}}</view>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="screen-item u-flex u-flex-between" @tap="pickerOpen(1)">
					<view class="screen-title">年龄</view>
					<view class="u-flex">
						<view class="screen-text">{{pickerText||'不限'}}</view>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="screen-item u-flex u-flex-between" @tap="pickerOpen(2)" >
					<view class="screen-title">身高</view>
					<view class="u-flex">
						<view class="screen-text">{{pickerText||'不限'}}</view>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
			</view>
			<view class="screen-cont" v-if="screenIndex==1">
				<u--input
					    placeholder="搜索档案号"
					    prefixIcon="search"
					    prefixIconStyle="font-size: 22px;color: #909399"
					></u--input>
			</view>
			<view class="screen-btn" @tap="close()">开始搜索</view>
		</u-popup>
		<u-picker :show="pickerShow" ref="uPicker" :columns="columns" @confirm="confirm"
			@change="changeHandler" @close="closePicker"></u-picker>
	</view>
</template>


<script>
	import citySelect from '@/components/linzq-citySelect/linzq-citySelect.vue';
	import popupLayer from '@/components/popup-layer/popup-layer.vue';

	export default {
		components: {
			citySelect,
			popupLayer
		},
		data() {
			return {
				statusBarHeight: this.statusBarHeight, //状态栏高度，在main.js里
				region: '请选择', //地区 
				list1: [{
					name: '推荐',
				}, {
					name: '新人',
				}],
				activeTab: 1, // 当前活跃的选项卡ID
				tabs: [
					{ id: '1', title: '男' },
					{ id: '2', title: '女' },
				],
				show: false,
				screenNav: [{
						name: "条件搜索"
					},
					{
						name: "档案号搜索"
					}
				],
				screenIndex:0,
				columns: [
					['中国', '美国'],
					['深圳', '厦门', '上海', '拉萨']
				],
				columnData: [
					['深圳', '厦门', '上海', '拉萨'],
					['得州', '华盛顿', '纽约', '阿拉斯加']
				],
				pickerShow: false,
				pickerText: ""
			}
		},
		onShow() {

		},
		mounted() {
			this.$refs.popupRef.close();
		},
		methods: {
			changeTab(id) {
				this.activeTab = id;
			},
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			},
			screenChange(e){
				console.log(e)
				this.screenIndex=e.index
			},
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					// picker为选择器this实例，变化第二列对应的选项
					picker.setColumnValues(1, this.columnData[index])
				}
			},
			// 回调参数为包含columnIndex、value、values
			confirm(e) {
				console.log('confirm', e)
				this.pickerText=""
				e.value.forEach(item => {
					this.pickerText += item
				})
				this.pickerShow = false
			},
			pickerOpen(index) {
				console.log(index)
				this.pickerShow = true
			},
			closePicker(){
				console.log('关闭')
				this.pickerShow = false
			},
			oncity() {
				this.$refs.popupRef.show
				var that = this
				this.$refs.popupRef.show();
			},
			back_city(e) {
				if (e !== 'no') {
					console.log(e, 222222)
					this.region = e.cityName
					this.$refs.popupRef.close();
				} else {
					this.$refs.popupRef.close();
				}
			},
		}
	}
</script>

<style lang="less" scoped>
	.wrap {
		display: flex;
		flex-direction: column;
		background: #fff;
		min-height: 100vh;
		padding-bottom: 200upx;
	}

	.signage {
		display: flex;
		flex-direction: row;
		align-items: center;

		.shop-name {
			font-size: 15px;
			margin: 0 12rpx;
		}
	}

	.screen-wrap {
		.screen-icon {
			width: 40upx;
			height: 40upx;
			margin-right: 10upx;
		}
	}

	.nav {
		display: flex;
		flex-direction: row;
		align-items: center;
		text-align: center;
		font-size: 28rpx;
		box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);

		.nav-rel {
			width: 42%;
		}

		.nav-new {
			width: 42%;
		}
	}
	.tabs-ul{
		display: flex;
		flex-direction: row;
		list-style: none;
		height: 65rpx;
		line-height: 65rpx;
		text-align: center;
		margin: 0;
		padding: 0;
		
		.tabs-ul-li {
			width: 100upx;
			height: 40upx;
			line-height: 40upx;
			text-align: center;
			border-radius: 50upx;
		}
		.active {
			background-color: #e16b8c;
			color: #fff;
		}
	}
	.art-box {
		padding: 30upx;

		.art-item {
			margin-bottom: 30upx;
			border-bottom: 1rpx solid #eee;
			padding-bottom: 20upx;

			.art-img {
				width: 160upx;
				height: 160upx;
				border-radius: 20upx;
				overflow: hidden;
			}

			.art-right-box {
				flex: 1;
				margin-left: 20upx;
				height: 160upx;

				.art-top {
					.nickname {
						font-weight: bold;
					}

					.authentication-icon {
						width: 100upx;
						height: 40upx;
					}
				}

				.tips {
					font-size: 30upx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
				}

				.art-bottom {
					font-size: 28upx;
					color: darkgray;
				}
			}
		}
	}

	.advertisement-box {
		border-radius: 20upx;
		height: 300upx;
		overflow: hidden;
		margin-bottom: 30upx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.screen-cont {
		border-top: 1rpx solid #eee;
		padding: 30upx 40upx;

		.screen-item {
			padding: 20upx 0;
			border-bottom: 1rpx solid #eee;
			font-size: 28upx;
			&:nth-last-of-type(1){
				border-bottom: none;
			}
			.screen-title {
				font-size: 28upx;
			}
		}
	}
	.screen-btn{
		width: 400upx;
		height: 70upx;
		line-height: 70upx;
		text-align: center;
		background-color: #e16b8c;
		color: #fff;
		margin:30upx auto;
		border-radius: 50upx;
	}
</style>